<template>
  <view v-if="shenheStatus == 0" class="my_coupon_box">
    <view>
      <u-tabs-swiper
        ref="tabs"
        name="cate_name"
        count="cate_count"
        :list="tabList"
        :is-scroll="false"
        active-color="red"
        :current="current"
        @change="tabsChange"
      ></u-tabs-swiper>
    </view>
    <view class="item_container">
      <CouponItem
        :list="list"
        :isStatus="true"
        :isButton="true"
        @giveOther="giveOther"
      ></CouponItem>
      <view style="padding-top: 30rpx" v-if="list.length == 0"
        ><u-empty :text="$t('common.noCoupon')" mode="coupon"></u-empty
      ></view>
    </view>

    <!-- 分享优惠券 -->
    <shareCoupon v-if="showShareCoupon" @closeShare="closeShare"></shareCoupon>
    <!-- 获取优惠券提示 -->
    <getCouponModal
      v-if="closeGetCouponModal"
      @handleConfirm="confirmCoupon"
      @handleConcel="closeGetCouponModal = false"
    ></getCouponModal> </view
  ><Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import CouponItem from '../components/coupon/item.vue';
import shareCoupon from '../components/coupon/shareCoupon.vue';
import getCouponModal from '../components/coupon/getCouponModal.vue';
export default {
  components: {
    CouponItem,
    shareCoupon,
    getCouponModal,
    Shenhe,
  },
  props: {},
  data() {
    return {
      current: 0,
      list: [],
      tabList: [
        {
          cate_name: this.$t('person.cashStatus1'),
        },
        {
          cate_name: this.$t('coupon.noUse'),
        },
        {
          cate_name: this.$t('coupon.used'),
        },
        {
          cate_name: this.$t('coupon.expire'),
        },
      ],
      showShareCoupon: false,
      closeGetCouponModal: false,
    };
  },
  computed: {
    dateFilter() {
      return function (str) {
        return this.$utils.turnDate(str * 1000 || 0, 'yyyy-mm-dd');
      };
    },
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.myCoupon'),
    });
    // this.closeGetCouponModal = true;
  },
  onShow() {
    this.getListData();
  },
  created() {},
  onReachBottom() {},
  methods: {
    confirmCoupon() {
      this.closeGetCouponModal = false;
    },
    giveOther(e) {
      let item = e.item;
      this.showShareCoupon = true;
    },
    closeShare() {
      this.showShareCoupon = false;
    },
    toDetail(id) {
      this.$utils.toUrl('/user/my_coupon/my_coupon_detail?id=' + id);
    },
    async getListData() {
      try {
        const res = await this.$allrequest.coupon.myCouponList({
          status: this.current,
        });
        if (res.code == 0) {
          this.list = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    tabsChange(val) {
      this.current = val;
      this.getListData();
    },
  },
  onShareAppMessage(res) {
    if (res.from == 'button') {
			const storeId = uni.getStorageSync("store_id");
      return {
        title: '赠送优惠券',
        path: '/user/my_coupon/get_coupon?id=' + res.target.dataset.id + `&store_id=${storeId}`,
        success(res) {
          uni.showToast({
            title: this.$t('home.success'),
          });
        },
        fail(res) {
          uni.showToast({
            title: this.$t('home.fail'),
            icon: 'none',
          });
        },
      };
    }
  },
};
</script>

<style lang="scss" scoped>
$bgcolor: #f2f2f2;
.my_coupon_box {
  height: 100vh;
  > view:nth-child(1) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
}
.item_container {
  padding: 100rpx 0 20rpx 0;
  background-color: $bgcolor;
  min-height: 100vh;
}

.coupon-item {
  position: relative;
  margin: 0 24rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  .date-price {
    padding: 30rpx;
    > view:nth-child(1) {
      flex: 1;
      width: 0;
      .title {
        font-size: 30rpx;
        font-weight: 600;
      }
      .date {
        margin-top: 12rpx;
        font-size: 22rpx;
        color: #8c8c8c;
      }
    }
    .price-box {
      > view:nth-child(1) {
        font-size: 28rpx;
        font-weight: 600;
        color: #f0250e;
      }
      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
      }
    }
  }
  .note {
    position: relative;
    padding: 15rpx 30rpx;
    border-top: 1px dashed #ededed;
    &::after {
      content: '';
      position: absolute;
      left: -10rpx;
      top: -10rpx;
      width: 20rpx;
      height: 20rpx;
      background: $bgcolor;
      border-radius: 50%;
    }
    &::before {
      content: '';
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 20rpx;
      height: 20rpx;
      background: $bgcolor;
      border-radius: 50%;
    }
    .left {
      flex: 1;
      width: 0;
      /deep/.u-iconfont {
        color: #8c8c8c !important;
      }
      /deep/.u-collapse-head {
        justify-content: flex-start;
        line-height: 48rpx;
        padding: 0;
        color: #8c8c8c;
      }
      /deep/.u-collapse-title {
        flex: initial;
        font-size: 24rpx;
        color: #8c8c8c;
      }
      /deep/.u-collapse-content {
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }
    // 按钮
    .btn-groups {
      margin-left: 10rpx;
      display: flex;
      justify-content: flex-end;
      view {
        width: 144rpx;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        text-align: center;
        border-radius: 24rpx;
      }
      .use-btn {
        background: #f0250e;
        color: #fff;
      }
      .go-with {
        background: #fee8e6;
        color: #f0250e;
      }

      .share-btn {
        background: #ffffff;
        border: 2rpx solid #999999;
        color: #191919;
        position: relative;
        button {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          opacity: 0;
        }
      }
    }
  }
  .status {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10rpx;

    border-radius: 0px 20rpx 0px 12rpx;
    line-height: 28rpx;
    font-size: 20rpx;
    font-weight: 400;
    color: #f0250e;
    background: #fee8e6;
  }
}
// .coupon_item {
//   width: 100%;
//   height: 160rpx;
//   display: flex;
//   background-repeat: no-repeat;
//   background-size: 100%;
//   padding: 20rpx;
//   margin-bottom: 30rpx;
// }
</style>
